<template>
  <div class="role_manager">
    <div class="header">
      <div class="btn_group">
        <HPlainButton v-permission="'role_add'" @click="addList">新增角色</HPlainButton>
        <el-dropdown trigger="click">
          <HButton :disabled="selecttion.length == 0">
            批量操作
            <el-icon class="el-icon--right">
              <ArrowDown />
            </el-icon>
          </HButton>
          <template #dropdown>
            <el-dropdown-menu>
              <div v-permission="'role_enabled'">
                <el-dropdown-item @click="useAll">
                  <el-icon>
                    <CircleCheck />
                  </el-icon>
                  批量启用
                </el-dropdown-item>
              </div>
              <div v-permission="'role_resign'">
                <el-dropdown-item @click="disableAll">
                  <el-icon>
                    <Warning />
                  </el-icon>
                  批量离职
                </el-dropdown-item>
              </div>
              <div v-permission="'role_delete'">
                <el-dropdown-item @click="deleAll">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  批量删除
                </el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="search">
        <el-input
          v-model.trim="keyword"
          clearable
          placeholder="关键词搜索"
          @keyup.enter="searchList"
          @clear="searchList"
        />
        <HButton type="primary" @click="searchList">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </HButton>
      </div>
    </div>
    <div class="table">
      <el-table
        ref="tableList"
        :border="true"
        stripe
        resizable
        :data="tableData"
        height="100%"
        @selection-change="handleChange"
      >
        <!--选择-->
        <el-table-column
          type="selection"
          width="40"
          :selectable="checkDisable"
          fixed="left"
          :align="'center'"
        />

        <!--序号-->
        <el-table-column
          show-overflow-tooltip
          type="index"
          label="序号"
          width="60"
          fixed="left"
          :align="'center'"
        />
        <!--角色名称-->
        <el-table-column show-overflow-tooltip prop="name" label="角色名称" min-width="150" />

        <!--角色代码-->
        <el-table-column show-overflow-tooltip prop="code" label="角色代码" width="150" />

        <!--角色类型-->
        <el-table-column show-overflow-tooltip prop="roleType" label="角色类型" min-width="150">
          <template #default="scope">
            <div>
              {{ getLabel(scope.row.roleType, rolesTypeOptions) }}
            </div>
          </template>
        </el-table-column>

        <!--数据权限类型-->
        <el-table-column show-overflow-tooltip prop="name" label="数据权限类型" min-width="150">
          <template #default="scope">
            <div>
              {{ getLabel(scope.row.dataScopeType, rolesTypeDataOptions) }}
            </div>
          </template>
        </el-table-column>

        <!--创建时间-->
        <el-table-column show-overflow-tooltip prop="updateTime" label="创建时间" width="170" />

        <!--更新时间-->
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="170" />

        <!--状态-->
        <el-table-column
          prop="disabled"
          label="角色状态"
          width="80"
          :align="'center'"
          fixed="right"
        >
          <template #default="scope">
            <div class="flex_justify_center">
              <HStatus v-if="!scope.row.status">在职</HStatus>
              <HStatus v-if="scope.row.status" type="info">离职</HStatus>
            </div>
          </template>
        </el-table-column>

        <!--操作-->
        <el-table-column show-overflow-tooltip fixed="right" label="操作" width="160">
          <template #default="scope">
            <el-space v-if="!scope.row.admin" :size="0" :spacer="spacer">
              <HLink v-permission="'role_assign'" @click="assignAuthor(scope.row)">分配权限</HLink>
              <!-- <HLink @click="onTestNewRole(scope.row)">测试新分配权限</HLink> -->
              <HLink v-permission="'role_update'" @click="viewDetail(scope.row)">编辑</HLink>
              <h-link v-permission="'role_delete'" type="error" @click="handleDelRole(scope.row)"
                >删除</h-link
              >
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        ref="pagination"
        :list_total="total"
        @size-change="getList"
        @current-change="getList(false)"
      />
    </div>

    <!-- 编辑角色弹窗 -->
    <h-dialog v-model="editDialog" :title="roleId ? '编辑角色' : '添加角色'">
      <el-form
        ref="ruleFormRef"
        label-position="top"
        inline-message
        class="modal_form_content"
        :rules="rules"
        :model="ruleForm"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input
            v-model.trim="ruleForm.name"
            clearable
            :disabled="isAdmin == true"
            placeholder="请输入名称"
          />
        </el-form-item>
        <el-form-item label="角色代码" prop="code">
          <el-input
            v-model.trim="ruleForm.code"
            clearable
            :disabled="isAdmin == true"
            placeholder="请输入条码"
          />
        </el-form-item>

        <!-- 角色类型 -->
        <el-form-item label="角色类型" prop="roleType">
          <el-select v-model="ruleForm.roleType" placeholder="请选择">
            <el-option
              v-for="(item, index) in rolesTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- 数据权限类型 -->
        <el-form-item label="数据权限类型" prop="dataScopeType">
          <el-select v-model="ruleForm.dataScopeType" placeholder="请选择">
            <el-option
              v-for="(item, index) in rolesTypeDataOptions"
              :key="index"
              :label="item.label"
              :value="index + 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="角色状态" class="same_line">
          <el-radio-group v-model="status">
            <el-radio :value="false" :disabled="isAdmin == true" size="small">启用</el-radio>
            <el-radio :value="true" :disabled="isAdmin == true" size="small">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <HButton is-modal type="primary" @click="submitForm(ruleFormRef)">保存</HButton>
        <HButton is-modal @click="editDialog = false">取消</HButton>
      </template>
    </h-dialog>

    <!-- 分配角色权限弹窗 -->
    <h-drawer v-model="assignDialog" :title="`分配【${ruleForm.name}】权限`" :width="800" unit="px">
      <el-scrollbar>
        <el-checkbox
          v-model="allValue"
          :indeterminate="isIndeterminate"
          size="large"
          name="type"
          style="margin-left: 12px"
          @change="changeAll"
        >
          全选
        </el-checkbox>
        <el-tree
          v-if="roleAuthorVos"
          ref="roleTreeSelectRef"
          :props="roleTreeProps"
          show-checkbox
          node-key="authorId"
          :data="getAllAuthorList"
          default-expand-all
          @check="handleRoleChange"
        />
      </el-scrollbar>

      <template #footer>
        <HButton v-if="!isAdmin" is-modal type="primary" @click="saveRoleAuthorVo">保存</HButton>
        <HButton is-modal @click="assignDialog = false">取消</HButton>
      </template>
    </h-drawer>

    <assign-permission v-model="assignPermissionDialogVisible" :role="currentEditRole" />
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { Search, Delete, Warning, CircleCheck, ArrowDown } from '@element-plus/icons-vue'
  import { ref, onMounted, reactive, h, watch } from 'vue'
  import { ElDivider, ElMessageBox } from 'element-plus'
  import type { ElTree, FormInstance, TableInstance } from 'element-plus'
  import {
    getRoleList,
    changeRole,
    deleRole,
    saveRole,
    getAllAuthor,
    getRoleAuthor,
    saveRoleAuthor,
  } from '@/api/role'
  import { Permission, RoleAuthor, Role } from './types'
  import _ from 'lodash'
  import AssignPermission from '@/components/pages/role-permission/assign-persmission/AssignPermission.vue'
  import routeComponentName from '@/config/route-component-name'
  import { HMessage, HMessageBox } from '@/components/common/message'

  defineOptions({
    name: routeComponentName.accountPermission.rolePermission,
  })

  const handleDelRole = (role: Role) => {
    if (tableList.value) {
      tableList.value.clearSelection()
      tableList.value.toggleRowSelection(role, true)
      deleAll()
    }
  }

  const assignPermissionDialogVisible = ref(false)
  const currentEditRole = ref<Role>({
    admin: false,
    code: '',
    createTime: '',
    id: '',
    name: '',
    status: false,
    updateTime: '',
  })
  // const onTestNewRole = async (role: Role) => {
  //   currentEditRole.value = { ...role }
  //   assignPermissionDialogVisible.value = true
  // }

  // TODO 该组件逻辑混乱，以后要优化这里

  /**
   * 权限更新事件
   */
  const handleRoleChange = (
    role: Permission,
    data: {
      checkedKeys: Array<string>
      checkedNodes: Array<Permission>
      halfCheckedKeys: Array<string>
      halfCheckedNodes: Array<Permission>
    },
  ) => {
    /**
     * 将父级权限也添加到选中数组里
     */
    const checkedNodes = [...data.checkedNodes, ...data.halfCheckedNodes]
    updateRoleSelectedArr(checkedNodes)
  }

  /**
   * 更新权限请求参数
   * @param {Array} roles - 选中的权限的数组
   */
  function updateRoleSelectedArr(roles: Array<Permission>) {
    /**
     * 权限保存数组
     */
    const saveData: Array<RoleAuthor> = []

    /**
     * 深度克隆选中权限数组
     * 为了解决，原数组不被影响
     */
    const __getAllAuthorList = _.cloneDeep(getAllAuthorList.value)

    /**
     * 遍历一级权限，将选中的权限添加到权限保存数组里
     */
    for (let i = 0; i < __getAllAuthorList.length; i++) {
      const role = roles.find((item) => __getAllAuthorList[i].authorId === item.authorId)
      if (role) {
        saveData.push({
          authorId: role.authorId,
          authorVos: getChild(role.authorVos),
        })
      }
    }

    /**
     * 遍历所有的子级权限
     * 将选中的权限按照原来的格式保存到权限保存数组里
     * @param {Array} arr - 选中的权限数组的子级权限数组
     */
    function getChild(arr: typeof __getAllAuthorList) {
      const __authorVos: Array<RoleAuthor> = []
      for (let i = 0; i < arr.length; i++) {
        const role = roles.find((item) => arr[i].authorId === item.authorId)
        if (role) {
          __authorVos.push({
            authorId: role.authorId,
            authorVos: getChild(role.authorVos),
          })
        }
      }

      return __authorVos
    }

    // 再将权限保存数组保存到请求参数里
    roleSaveData.value = _.cloneDeep(saveData)
  }

  // 权限保存数组
  const roleSaveData = ref<Array<RoleAuthor>>([])

  /**
   * 权限树形选择器配置
   */
  const roleTreeProps = ref({
    value: 'authorId',
    label: 'name',
    children: 'authorVos',
  })

  /**
   * 间距组件的间隔符
   */
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  const loading = ref(false)
  const editDialog = ref(false)
  const assignDialog = ref(false)
  const tableData = ref([]) // 角色列表
  const total = ref() // 总数量
  const limit = ref() // 每页显示数量
  const page = ref() // 当面页码
  const keyword = ref('') // 搜索关键词
  const pagination = ref() // 分页dom
  const tableList = ref<TableInstance | null>(null) // 列表dom

  const roleId = ref('') // 角色ID
  const authorIds = ref([]) // 权限ID集合
  const empIds = ref([]) // 角色账号ID集合
  const status = ref(false) // 角色状态 false-正常，true-禁用

  const isAdmin = ref(false) // 是否是超管

  // const allId
  const isIndeterminate = ref(true)
  const allValue = ref(false)
  const checkAllIds = ref([]) //全选的ids

  // 角色Options
  const rolesTypeOptions = ref([
    {
      label: '总部角色',
      value: 1,
    },
    {
      label: '网点角色',
      value: 2,
    },
  ])

  // 数据权限类型Options
  const rolesTypeDataOptions = ref([
    {
      label: '所有数据',
      value: '1',
    },
    {
      label: '部门数据',
      value: '2',
    },
    {
      label: '个人数据',
      value: '3',
    },
  ])

  // 获取label
  const getLabel = (val, options) => {
    const obj = options.find((item) => item.value == val)
    return obj?.label ?? ''
  }

  // 全选按钮点击事件
  // TODO 类型问题 - 以后优化到这里或者改到这里的时候要修改
  const changeAll = (val) => {
    if (val) {
      roleAuthorVos.value = checkAllIds.value
      roleAuthorList.value = []
      const extractPermissions = (arr: typeof getAllAuthorList.value) => {
        arr.forEach((item) => {
          if (item.authorVos.length > 0) {
            extractPermissions(item.authorVos)
          }

          roleAuthorList.value.push(item)
        })
      }
      extractPermissions(getAllAuthorList.value)
    } else {
      roleAuthorVos.value = []
      roleAuthorList.value = []
    }
    selectSomePermission()
    updateRoleSelectedArr(roleAuthorList.value)
    isIndeterminate.value = false
  }

  const changeValue = () => {
    let array1 = []
    let array2 = []
    for (let i = 0; i < roleAuthorVos.value.length; i++) {
      let item = roleAuthorVos.value[i]
      array1.push(...item)
    }
    for (let i = 0; i < checkAllIds.value.length; i++) {
      let item = checkAllIds.value[i]
      array2.push(...item)
    }
    if (arraysAreEqual(array1, array2) && roleAuthorVos.value.length > 0) {
      allValue.value = true
    } else {
      allValue.value = false
    }
    isIndeterminate.value = roleAuthorVos.value.length > 0 && !arraysAreEqual(array1, array2)
  }
  // 将两个数组排序判断是否相等
  function arraysAreEqual(arr1, arr2) {
    if (arr1.length !== arr2.length) {
      return false
    }
    const sortedArr1 = arr1.slice().sort()
    const sortedArr2 = arr2.slice().sort()
    for (let i = 0; i < sortedArr1.length; i++) {
      if (sortedArr1[i] !== sortedArr2[i]) {
        return false
      }
    }
    return true
  }

  // 表单数据
  const ruleForm = reactive({
    name: '', // 角色名称
    code: '', // 角色代码
    roleType: 1, // 角色类型
    dataScopeType: '', // 数据权限类型
  })

  //权限列表
  const getAllAuthorList = ref<Array<Permission>>([])
  const roleAuthorVos = ref([]) //绑定选中的
  // 表单元素
  const ruleFormRef = ref<FormInstance>()

  // 验证规则
  const rules = reactive({
    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
    code: [{ required: true, message: '请输入角色代码', trigger: 'blur' }],
    roleType: [{ required: true, message: '请选择角色类型', trigger: 'blur' }],
    dataScopeType: [{ required: true, message: '请选择数据权限类型', trigger: 'blur' }],
  })

  // 权限树形选择组件实例
  const roleTreeSelectRef = ref<InstanceType<typeof ElTree> | null>(null)

  // 获取角色列表
  const getList = async (val = true) => {
    loading.value = true
    if (val) pagination.value.setPage()
    limit.value = pagination.value.size
    page.value = pagination.value.current
    const data = {
      keyword: keyword.value,
      limit: limit.value,
      page: page.value,
    }
    const res = await getRoleList(data)
    total.value = parseInt(res.data.data.total)
    loading.value = false
    tableData.value = res.data.data.rows
  }
  // *****************获取权限列表**********
  const AllAuthorList = async () => {
    const res = await getAllAuthor()
    if (res) {
      getAllAuthorList.value = res.data.data.rows
      checkAllIds.value = getIds(res.data.data.rows)
    }
  }
  // *****************end*****************
  // ***********根据角色ID获取角色权限***********
  const roleAuthorList = ref([])

  const getRoleAuthorItem = async (id) => {
    roleAuthorVos.value = []
    loading.value = true
    const res = await getRoleAuthor(id)
    if (res.data) {
      roleAuthorVos.value = getIds(res.data.data.rows)
      roleAuthorList.value = res.data.data.rows
      roleSaveData.value = res.data.data.rows
      await AllAuthorList()
      changeValue()
    }
    loading.value = false
  }
  function getIds(arr) {
    let result = []
    arr.forEach((obj) => {
      let id = obj.authorId
      if (obj.authorVos.length > 0) {
        let subArr = getIds(obj.authorVos)
        subArr.forEach((subIds) => {
          result.push([id, ...subIds])
        })
      } else {
        result.push([id])
      }
    })
    return result
  }

  watch(roleTreeSelectRef, (value) => {
    if (value) {
      selectSomePermission()
    }
  })

  /**
   * 将已有的权限给勾上
   */
  const selectSomePermission = () => {
    if (roleTreeSelectRef.value) {
      const __selectedCheckBoxIds: Array<string> = []
      const recursiveMethod = (roles) => {
        for (let i = 0; i < roles.length; i++) {
          if (roles[i].authorVos.length > 0) {
            recursiveMethod(roles[i].authorVos)
          }

          /**
           * 注意，注意，千万要注意
           * 这里要判断当前权限是否为最后一级，如果是就将其id推到选中数组里
           * 如果将父级权限id也推到选中数组里的话就会出现该父级权限下的所有权限选项都会被选中的问题
           */
          if (roles[i].authorVos.length === 0) {
            __selectedCheckBoxIds.push(roles[i].authorId)
          }
        }
      }
      recursiveMethod(roleAuthorList.value)
      roleTreeSelectRef.value.setCheckedKeys(__selectedCheckBoxIds, false)
    }
  }

  // ****************end**************
  // 分配权限
  const assignAuthor = async (obj) => {
    roleAuthorVos.value = []
    roleId.value = obj.id
    isAdmin.value = obj.admin
    ruleForm.name = obj.name
    await getRoleAuthorItem(roleId.value)
    assignDialog.value = true
  }

  // 处理选择的数据
  // function transformArray(arr) {
  //   const result = []
  //   arr.forEach((subArr) => {
  //     let current = result
  //     subArr.forEach((authorId, index) => {
  //       let found = current.find((item) => item.authorId === authorId)
  //       if (!found) {
  //         found = { authorId: authorId, authorVos: [] }
  //         current.push(found)
  //       }
  //       if (index === subArr.length - 1) {
  //         found.authorVos = []
  //       } else {
  //         current = found.authorVos
  //       }
  //     })
  //   })
  //   return result
  // }

  // 保存分配权限
  const saveRoleAuthorVo = () => {
    saveRoleAuthor(roleSaveData.value, roleId.value).then((res) => {
      if (res.data.success == true) {
        HMessage.success(res.data.message)
        assignDialog.value = false
      } else {
        HMessageBox.warning(res.data.message)
      }
    })
  }
  onMounted(() => {
    getList()
  })

  // 获取表格选中的数据
  const selecttion = ref([])
  const handleChange = (val: any) => {
    if (val.length != 0) {
      val.forEach((item) => {
        if (selecttion.value.indexOf(item.id) == -1) {
          selecttion.value.push(item.id)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item.id)
        }
      })
    } else {
      selecttion.value = []
    }
  }

  // 判断是否可选
  const checkDisable = (row) => {
    if (row.admin == true) {
      return false // 可选
    } else {
      return true // 不可选
    }
  }

  // 添加角色
  const addList = () => {
    ruleForm.name = ''
    ruleForm.code = ''
    ruleForm.roleType = 1
    status.value = false
    roleId.value = ''
    isAdmin.value = false
    editDialog.value = true
  }

  // 保存角色
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
      if (valid) {
        const data = {
          authorIds: authorIds.value,
          code: ruleForm.code,
          empIds: empIds.value,
          name: ruleForm.name,
          status: status.value,
          roleType: ruleForm.roleType,
          dataScopeType: ruleForm.dataScopeType,
        }
        const data2 = {
          authorIds: authorIds.value,
          code: ruleForm.code,
          empIds: empIds.value,
          id: roleId.value,
          name: ruleForm.name,
          roleType: ruleForm.roleType,
          dataScopeType: ruleForm.dataScopeType,
          status: status.value,
        }
        if (roleId.value == '') {
          // 新增
          await saveRole(data).then((res) => {
            if (res.data.success == true) {
              HMessage.success(res.data.message)
              editDialog.value = false
              getList()
            } else {
              HMessageBox.warning(res.data.message)
              return
            }
          })
        } else {
          // 编辑
          await saveRole(data2).then((res) => {
            if (res.data.success == true) {
              HMessage.success(res.data.message)
              editDialog.value = false
              getList()
            } else {
              HMessageBox.warning(res.data.message)
              return
            }
          })
        }
      } else {
        return
      }
    })
  }

  // 删除角色
  // const deleteRole = () => {
  //   let tmp = []
  //   tmp.push(roleId.value)
  //   ElMessageBox({
  //     type: 'error',
  //     icon: markRaw(Delete),
  //     title: '提示',
  //     message: '确认删除该角色?',
  //     showCancelButton: true,
  //     closeOnClickModal: false,
  //     confirmButtonText: '确定',
  //     cancelButtonText: '取消',
  //     autofocus: false,
  //     beforeClose: (action, instance, done) => {
  //       if (action === 'confirm') {
  //         instance.confirmButtonLoading = true
  //         instance.confirmButtonText = '加载中...'
  //         setTimeout(() => {
  //           done()
  //           setTimeout(() => {
  //             instance.confirmButtonLoading = false
  //           }, 0)
  //         }, 1000)
  //       } else {
  //         done()
  //       }
  //     },
  //   }).then(async () => {
  //     const res = await deleRole(tmp)
  //     HMessage.success(res.data.message)
  //     selecttion.value = []
  //     editDialog.value = false
  //     tableList.value.clearSelection()
  //     getList()
  //   })
  // }

  // 查看角色详细
  const viewDetail = (obj: any) => {
    roleId.value = obj.id
    isAdmin.value = obj.admin
    ruleForm.name = obj.name
    ruleForm.code = obj.code
    ruleForm.roleType = obj.roleType
    ruleForm.dataScopeType = obj.dataScopeType
    status.value = obj.status
    editDialog.value = true
  }

  // 搜索角色
  const searchList = () => {
    getList()
  }

  // 批量启用
  const useAll = () => {
    if (selecttion.value.length == 0) {
      HMessageBox.warning('请选择要启用的角色')
      return
    }
    ElMessageBox({
      title: '提示',
      message: '确认启用选中的角色?',
      type: 'warning',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(async () => {
      const res = await changeRole(selecttion.value, { status: status.value })
      HMessage.success(res.data.message)
      selecttion.value = []
      tableList.value.clearSelection()
      getList()
    })
  }

  // 批量禁用
  const disableAll = () => {
    if (selecttion.value.length == 0) {
      HMessageBox.warning('请选择要禁用的角色')
      return
    }
    ElMessageBox({
      type: 'warning',
      title: '提示',
      message: '确认禁用选中的角色?',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(async () => {
      const res = await changeRole(selecttion.value, { status: !status.value })
      HMessage.success(res.data.message)
      selecttion.value = []
      tableList.value.clearSelection()
      getList()
    })
  }

  // 批量删除
  const deleAll = () => {
    if (selecttion.value.length == 0) {
      HMessageBox.warning('请选择要删除的角色')
      return
    }
    ElMessageBox({
      type: 'error',
      title: '提示',
      message: '确认删除选中的角色?',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(async () => {
      loading.value = true
      const res = await deleRole(selecttion.value)
      HMessage.success(res.data.message)
      selecttion.value = []
      tableList.value.clearSelection()
      getList()
    })
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
